<!-- 歌曲评论 -->
<template>
  <view class="talk-box">
    <view class="title">
      精彩评论
    </view>

    <view class="talk-container"
          v-for="item in data"
          :key="item.id">
      <view class="talk-item">
        <!-- 评论头部 -->
        <view class="head-box">
          <!-- 头像 -->
          <image class="head-img"
                 :src="item.userImg">
          </image>

          <!-- 昵称/时间 -->
          <view class="nick-box">
            <view class="nick-name">
              {{item.nickName}}
              <!-- vip图标 -->
              <image src="~@/static/img/dujia.png">
              </image>
            </view>
            <view class="talk-time">
              {{item.time}}
            </view>
          </view>

          <!-- 点赞 -->
          <view class="favor">
            {{item.favor}}
            <view class="iconfont iconlike"></view>
          </view>
        </view>

        <!-- 评论主体 -->
        <view class="talk-body">
          {{item.talk}}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      data: {
        type: Array,
        default: () => []
      }
    },
  }
</script>

<style lang="scss"
       scoped>
  .talk-box {
    margin: 0 30rpx;

    .title {
      color: #FFFFFF;
      font-size: 36rpx;
      padding: 50rpx 0;
    }

    .talk-container {
      .talk-item {
        margin-bottom: 28rpx;

        .head-box {
          display: flex;
          justify-content: space-between;

          .head-img {
            width: 64rpx;
            height: 64rpx;
            border-radius: 50%;
            margin-right: 18rpx;
          }

          .nick-box {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;

            .nick-name {
              display: flex;
              align-items: center;
              font-size: 30rpx;
              color: #eee;

              image {
                transform: translateY(2rpx);
                width: 26rpx;
                height: 18rpx;
                margin-left: 10rpx;
              }
            }

            .talk-time {
              font-size: 26rpx;
              color: #ccc;
            }
          }

          .favor {
            display: flex;
            align-items: center;
            color: #ccc;
            font-size: 30rpx;
          }
        }

        .talk-body {
          line-height: 40rpx;
          color: #FFFFFF;
          font-size: 26rpx;
          padding: 20rpx 0;
          margin-left: 82rpx;
          border-bottom: 1px solid #cbcacf;
        }
      }
    }
  }
</style>
